<template>
  <div>
    <h2 style="text-align: center">供货订单</h2>
    <el-row>
      <el-col :span="7">
        合同号：
        <el-input size="large" style="width: 200px;" v-model="queryObj.pact" placeholder="请输入合同号"/>
      </el-col>
      <el-col :span="7">
        起始日期：
        <el-date-picker
            v-model="queryObj.startTime"
            type="date"
            placeholder="请选择开始日期"
            size="large"
            value-format="YYYY-MM-DD"
        />
      </el-col>
      <el-col :span="7">
        结束日期：
        <el-date-picker
            v-model="queryObj.endTime"
            type="date"
            placeholder="请选择结束日期"
            size="large"
            value-format="YYYY-MM-DD"
        />
      </el-col>

      <el-col :span="3">
        <el-button type="primary" @click="findOrder(1)">搜索</el-button>
      </el-col>
    </el-row>

    <el-table :data="orderList" stripe height="400" style="width: 100%">
      <el-table-column label="订单编号" prop="orderId"/>
      <el-table-column label="合同号" prop="pact"/>
      <!--      <el-table-column label="供应商名称" prop="supplierName"/>-->
      <el-table-column label="订单总价" prop="sumPrice"/>
      <el-table-column label="创建时间" prop="time"/>

      <el-table-column label="操作" width="400px">
        <template #default="scope">
          <el-button size="default" type="primary" @click="showOrderInfo = true,findById(scope.row.id)">
            查看详情
          </el-button>
          <el-button size="default" type="primary" @click="findSupplyList(scope.row.orderId)">
            查看发货单
          </el-button>
          <el-button size="default" type="primary"
                     @click="findAllGoods(scope.row.pact,scope.row.orderId)">
            添加发货单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--订单详情-->
    <el-dialog v-model="showOrderInfo" title="订单详情" center width="70%">
      <p>订单编号: {{ order.orderId }}</p>
      <p>合同号: {{ order.pact }}</p>
      <p>供应商名称: {{ order.supplierName }}</p>
      <p>订单总价: {{ order.sumPrice }}</p>
      <p>创建时间: {{ order.time }}</p>
      <h3>商品详情</h3>
      <el-table :data="order.supplyGoodsList">
        <el-table-column property="goodsName" label="商品名称"/>
        <el-table-column property="type" label="类型"/>
        <el-table-column property="brand" label="品牌"/>
        <el-table-column property="color" label="颜色"/>
        <el-table-column property="size" label="大小"/>
        <el-table-column property="price" label="单价"/>
        <el-table-column property="sum" label="数量"/>
      </el-table>
    </el-dialog>

    <!--供货单详情-->
    <el-dialog v-model="showSupplyList" title="供货单详情" center width="70%">
      <el-table :data="supplyList" style="width: 100%" height="300">
        <el-table-column type="expand">
          <template #default="props">
            <span style="margin-left: 30px;font-weight: bold">商品详情</span>
            <el-table :data="props.row.goodsList" stripe style="margin-left: 20px;">
              <el-table-column property="supplyGoods.goodsName" label="商品名称"/>
              <el-table-column property="supplyGoods.type" label="类型"/>
              <el-table-column property="supplyGoods.brand" label="品牌"/>
              <el-table-column property="supplyGoods.color" label="颜色"/>
              <el-table-column property="supplyGoods.size" label="大小"/>
              <el-table-column property="supplyGoods.price" label="单价"/>
              <el-table-column property="num" label="数量"/>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="供货批次号" prop="batch"/>
        <el-table-column label="订单号" prop="orderId"/>
        <el-table-column label="供应商名称" prop="supplierName"/>
        <el-table-column label="状态" prop="status"/>
        <el-table-column label="时间" prop="time"/>
        <el-table-column label="地址" prop="address"/>
        <el-table-column label="总价" prop="sumPrice"/>
      </el-table>
    </el-dialog>

    <!--添加发货单-->
    <el-dialog v-model="showAddSupply" title="添加发货单" @close="addSupplyObj={}" center width="1000">


      地址：
      <el-input size="large" style="width: 200px;" v-model="addSupplyObj.address" placeholder="请输入送货地址"/>
      <br>
      总价：{{ computePrice() }}

      <el-table
          ref="multipleTable"
          :data="goodsList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>

        <el-table-column
            prop="goodsName"
            label="商品名"
            width="120">
        </el-table-column>

        <el-table-column
            prop="type"
            label="类型"
            width="120">
        </el-table-column>

        <el-table-column
            prop="brand"
            label="品牌"
            width="120">
        </el-table-column>

        <el-table-column
            prop="color"
            label="颜色"
            width="120">
        </el-table-column>
        <el-table-column
            prop="size"
            label="大小"
            width="120">
        </el-table-column>

        <el-table-column
            prop="price"
            label="价格"
            width="120">
        </el-table-column>

        <el-table-column label="数量" prop="num">
          <template #default="scope">
            <el-input-number v-model="scope.row.num" min="1"></el-input-number>
          </template>
        </el-table-column>

      </el-table>
      <div style="margin-top: 20px;display: flex;justify-content: center">
        <el-button type="primary" @click="addSupply(),showAddSupply=false">添加</el-button>
        <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
      </div>
    </el-dialog>


    <div style="display: flex;justify-content:space-around;margin-top: 40px">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="findOrder"
      />

    </div>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      orderList: [],
      total: 0,
      currentPage: 1,
      pageSize: 6,
      queryObj: {},
      order: {},
      showOrderInfo: false,
      supplyList: [],
      showSupplyList: false,
      showAddSupply: false,
      address: "",
      pact: "",
      orderId: "",
      addSupplyObj: {},

      sumPrice: 0,
      goodsList: [],
      selectGoods: [],
    }
  },
  methods: {
    findOrder(pageNO) {
      this.queryObj.pageNO = pageNO;
      this.currentPage = pageNO
      axios.get("/project/order/cutByItem", {params: this.queryObj})
          .then(resp => {
            let obj = resp.data
            if (obj.success) {
              this.orderList = obj.data.records;
              this.total = obj.data.total;
              this.pageSize = obj.data.size
            }
          })
    },
    findById(id) {
      axios.get("/project/order/findById", {params: {id}})
          .then(resp => {
            let obj = resp.data
            if (obj.success) {
              this.order = obj.data
              // console.log(obj.data)
              console.log(this.order.supplyGoodsList)
            }
          })
    },
    findSupplyList(orderId) {
      axios.get("/project/order/findSupplyList", {params: {orderId}})
          .then(resp => {
            let obj = resp.data
            if (obj.success) {
              this.supplyList = obj.data
              // console.log(obj.data)
              this.showSupplyList = true
            }
          })
    },

    findAllGoods(pact, orderId) {
      this.showAddSupply = true
      this.addSupplyObj.orderId = orderId;
      this.addSupplyObj.pact = pact;
      axios.get("/project/supplyGoods/findAll", {params: {pact}}).then(resp => {
        let vo = resp.data
        this.goodsList = vo.data
        this.goodsList.forEach(n => n.num = 1)
      })
    },

    addSupply() {

      let goodsArr = [];
      this.selectGoods.forEach(n => {
        let goods = {goodsId: n.id, num: n.num};
        goodsArr.push(goods);
      })
      let stringInfo = JSON.stringify(goodsArr)
      this.addSupplyObj.goodsArr = stringInfo
      console.log(this.addSupplyObj)
      axios.post("/project/supply/addSupply", this.addSupplyObj).then(resp => {
        let info = resp.data
        if (info.success) {
          this.showAddSupply = false;
          ElMessage.success("添加成功")
        }
      })
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    computePrice() {
      let price = 0
      this.selectGoods.forEach(n => {
        price += n.price * n.num;
      })
      this.addSupplyObj.sumPrice = price;
      return price;
    },
    handleSelectionChange(val) {
      this.selectGoods = val
    }

  },
  created() {
    this.findOrder(1);
  }
}
</script>

<style scoped>
.el-col {
  display: flex;
  align-items: center;
}

.el-row {
  margin: 40px 0;
}
</style>